<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>Demo of Google SMD / Translate test</title>
	<style type="text/css">
		body, html {
			width:100%;
			margin:0; padding:0;
		}
		.logo {
			border:0; vertical-align:middle;
		}
		.summary {
			color:#666;
			font:8pt Arial,sans-serif;
		}
		#container {
			width:760px;
			margin:0 auto;
		}
		#loader {
			position:absolute;
			top:3px;
			left:3px;
			visibility:hidden;
			height:50px; 
			width:50px;
			background:url("../../../dojox/image/resources/images/loading.gif") no-repeat center center;
		}
		.inputBox {
			width:300px;
		}
		.warn { color:magenta; }
		.over { color:red !important; }
	</style>

	<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="isDebug: true, parseOnLoad: true"></script>
	<script type="text/javascript">
		dojo.require("dojox.rpc.Service");
		dojo.require("dojo.io.script");

		var google, showLoader, hideLoader = null;
		function init(){

			var s = dojo.query("select.clone")[0];
			var n = dojo.clone(s);
			dojo.attr(s,"id","fromLang");
			dojo.attr(n,"id","toLang");
			dojo.place(n, "target", "after");
			
			google = new dojox.rpc.Service(dojo.moduleUrl("dojox.rpc","SMDLibrary/google.smd")); 
			
			showLoader = dojo.hitch(dojo,"style","loader","visibility","visible");
			hideLoader = dojo.hitch(dojo,"style","loader","visibility","hidden");

			dojo.connect(dojo.byId("test"),"onkeypress",function(e){
				var n = dojo.byId('test');
				var len = n.value.length + 1;
				if(len >= 400 && len < 500){
					if(!dojo.hasClass("progress","warn")){ dojo.addClass("progress","warn"); }
				}else if(len >= 501){
					n.value = n.value.substr(0, 500)
					if(!dojo.hasClass("progress","over")){ dojo.addClass("progress","over"); }
					return false;
				}else{
					dojo.removeClass("progress","over"); 
					dojo.removeClass("progress","warn");
				}
				dojo.byId("used").innerHTML = len + "";
				
			});

			var runner = function(e){
				var pair = dojo.byId("fromLang").value + "|" + dojo.byId("toLang").value;
				google.translate({ q: dojo.byId("test").value, langpair:pair })
					.addBoth(function(response){
						var r = response.responseData;
						if(r && r.translatedText){
							dojo.byId("response").value = r.translatedText;
						}
						dojo.byId("flop").disabled = false;
					});
			};

			dojo.connect(dojo.byId("doit"),"onclick", runner);

			dojo.connect(dojo.byId("flop"),"onclick", function(e){
				// take the value from the translated text, dump it in the incoming
				// and set the values opposite
				var input = dojo.byId("test");
				var resp = dojo.byId("response");
				var trans = resp.value;

				resp.value = "";
				input.value = trans;
				
				var cur = dojo.byId("fromLang").selectedIndex;
				dojo.query("#toLang option").map(function(n){ return (n.selected) ? n : false; })
					.forEach(function(n,i){
						if(n){
							dojo.byId("fromLang").selectedIndex = i;
							dojo.byId("toLang").selectedIndex = cur;
						}
				});
				dojo.byId("flop").disabled = true;
				runner();
					
			});

		}
		dojo.addOnLoad(init);

	</script>
</head>

<body>
		<div id="loader"></div>
		<div id="container">
			<h2><a href="http://google.com"><img class="logo" src="http://www.google.com/logos/Logo_40wht.gif" alt="Google" /></a> Ajax API SMD / Translation Test</h2>

			<div id="progress">Used: <span id="used">?</span> of 500 max.</div>
			<textarea id="test" style="float:left; width:300px; height:200px; border:1px solid #666; background:#ededed; color:#666"></textarea>
			<textarea id="response" style="float:right; width:300px; height:200px; border:1px solid #666; background:#ededed; color:#666"></textarea>

			<br style="clear:both">

			<div style="padding-top:15px;">
			From:
			<select class="clone">
				<option  value="ar">Arabic</option><option  value="bg">Bulgarian</option>
				<option  value="zh-CN">Chinese (Simplified)</option><option  value="zh-TW">Chinese (Traditional)</option>
				<option  value="hr">Croatian</option><option  value="cs">Czech</option><option  value="da">Danish</option>
				<option  value="nl">Dutch</option><option SELECTED value="en">English</option><option  value="fi">Finnish</option>
				<option  value="fr">French</option><option  value="de">German</option><option  value="el">Greek</option>
				<option  value="hi">Hindi</option><option  value="it">Italian</option><option  value="ja">Japanese</option>
				<option  value="ko">Korean</option><option  value="no">Norwegian</option><option  value="pl">Polish</option>
				<option  value="pt">Portuguese</option><option  value="ro">Romanian</option><option  value="ru">Russian</option>
				<option  value="es">Spanish</option><option  value="sv">Swedish</option>
			</select>

			<span id="target">To: &nbsp;</span>
			
			<button id="doit">Translate</button>
			<button id="flop" disabled="disabled">Flip Back</button>
	
			</div>
			
		
			
		</div>


</body>
</html>
